//获得IP
var ip = document.getElementById("serverIp").value;
var code = document.getElementById("serverCode").value;

//勾画整体布局
var left_1 = document.getElementById("left_1");
var left_2 = document.getElementById("left_2");
var left_3 = document.getElementById("left_3");

document.getElementById('right').innerHTML='<div id="right_1" style="border-style: solid; border-width: 32px 37px; border-image-slice: 32 37 fill; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; background: none;border-image-source:url(\'image/kuang.png\');height: 305px">右二</div><div style="height: 20px"></div><div id="right_2" style="border-style: solid; border-width:32px 37px; border-image-slice: 32 37 fill; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; background: none;border-image-source:url(\'image/kuang.png\');height: 637px"></div>';
var right_1 = document.getElementById('right_1');
var right_2 = document.getElementById('right_2');

document.getElementById('center').innerHTML = '<div id="center_1" style="height: 657px"><div><div id="center_2" style="border-style: solid; border-width: 32px 37px; border-image-slice: 32 37 fill; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; background: none;border-image-source:url(\'image/kuang.png\');height: 305px;position:absolute;top:657px;width:862px"></div>';
var center_1 = document.getElementById("center_1");
var center_2 = document.getElementById("center_2");
//勾画中二区域
var portInfo = document.createElement('div');
style='width:800px;height:250px;position: absolute;top:0px;left:0px;z-index:9999;';
portInfo.setAttribute('style', style);
var pStatus = '<div class="col-sm-2"><a class="abutton" href="ServerInfo/getNewServerinfo?code=TCMEMR"><img src="image/01.png" width="80" height="80"><br><br><font size="4" style="font-weight: bold;position:relative;top:-20px;" color="#EEE">电子病历</font></a></div>' +
'<div class="col-sm-2"><a class="abutton" href="ServerInfo/getNewServerinfo?code=TCMAE"><img src="image/02.png" width="80" height="80"><br><br><font size="4" style="font-weight: bold;position:relative;top:-20px;" color="#EEE">辨证论治</font></a></div>'+
'<div class="col-sm-2"><a class="abutton" href="ServerInfo/getNewServerinfo?code=TCMK"><img src="image/03.png" width="80" height="80"><br><br><font size="4" style="font-weight: bold;position:relative;top:-20px;" color="#EEE">知识库</font></a></div>'+
'<div class="col-sm-2"><a class="abutton" href="ServerInfo/getNewServerinfo?code=TCMRC"><img src="image/04.png" width="80" height="80"><br><br><font size="4" style="font-weight: bold;position:relative;top:-20px;" color="#EEE">远程会诊</font></a></div>'+
'<div class="col-sm-2"><a class="abutton" href="ServerInfo/getNewServerinfo?code=TCMRT"><img src="image/05.png" width="80" height="80"><br><br><font size="4" style="font-weight: bold;position:relative;top:-20px;" color="#EEE">远程教育</font></a></div>'+
'<div class="col-sm-2"><a class="abutton" href="ServerInfo/getNewServerinfo?code=TCMHEAL"><img src="image/06.png" width="80" height="80"><br><br><font size="4" style="font-weight: bold;position:relative;top:-20px;" color="#EEE">治未病</font></a></div>'+
'<div class="col-sm-2"><a class="abutton" href="ServerInfo/getNewServerinfo?code=TCMCBS"><img src="image/07.png" width="80" height="80"><br><br><font size="4" style="font-weight: bold;position:relative;top:-20px;" color="#EEE">业务监管</font></a></div>'+
'<div class="col-sm-2"><a class="abutton" href="ServerInfo/getNewServerinfo?code=TCMPMS"><img src="image/08.png" width="80" height="80"><br><br><font size="4" style="font-weight: bold;position:relative;top:-20px;" color="#EEE">资源配置</font></a></div>'+
'<div class="col-sm-2"><a class="abutton" href="ServerInfo/getNewServerinfo?code=TCMESB"><img src="image/09.png" width="80" height="80"><br><br><font size="4" style="font-weight: bold;position:relative;top:-20px;" color="#EEE">ESB系统</font></a></div>'+
'<div class="col-sm-2"><a class="abutton" href="ServerInfo/getNewServerinfo?code=ORACLE"><img src="image/10.png" width="80" height="80"><br><br><font size="4" style="font-weight: bold;position:relative;top:-20px;" color="#EEE">ORACLE</font></a></div>'+
'<div class="col-sm-2"><a class="abutton" href="ServerInfo/getNewServerinfo?code=NGINX"><img src="image/11.png" width="80" height="80"><br><br><font size="4" style="font-weight: bold;position:relative;top:-20px;" color="#EEE">负载均衡</font></a></div>'+
'<div class="col-sm-2"><a class="abutton" href="ServerInfo/getNewServerinfo?code=TCMEMR"><img src="image/12.png" width="80" height="80"><br><br><font size="4" style="font-weight: bold;position:relative;top:-20px;" color="#EEE">互联互通</font></a></div>';
portInfo.innerHTML=pStatus;
center_2.appendChild(portInfo);

//函数启动 中一区域
getCanvas('topological', center_1);
getDIskInfoStart();
setInterval(function() {
	freshDIskInfo();
}, 15000);

//勾画左一区域
left_1.innerHTML = '<h4 align="center" style="color:#EBD775">CPU信息</h4>';
getCanvas('cpuUse', left_1);
getCpuEcharts();
getCpuInfoList();
setInterval(function() {
	getCpuInfo();
}, 15000);

//勾画左二区域 
left_2.innerHTML = '<h4 align="center" style="color:#EBD775">内存信息</h4>';
getCanvas('memUse', left_2);
getMemEcharts();
getMemInfoList();
setInterval(function() {
	getmemInfo();
}, 15000);

//勾画左三区域 
left_3.innerHTML = '<h4 align="center" style="color:#EBD775">磁盘信息</h4>';
getCanvas('diskUse', left_3);
getDiskEcharts();
getDIskInfo();
setInterval(function() {
	getDIskInfo();
}, 15000);

//勾画右一区域
right_1.innerHTML = '<h4 align="center" style="color:#EBD775">网络信息</h4>';
getCanvas('NetUse', right_1);
getNetEcharts();
getNetInfoList();
setInterval(function() {
	getNewNetInfo();
}, 15000);

//勾画右二区域
right_2.innerHTML = '<h4 align="center" style="color:#EBD775;position:relative;top:-48px;">MYSQL信息</h4>';
getCanvas('mySqlUse', right_2);
getmySqlEcharts();
getmySqlInfoList();
setInterval(function() {
	getNewmySqlInfo();
}, 15000);

//得到CPU信息的echarts图表
function getCpuEcharts() {
	left1Chart = echarts.init(cpuUse);
	option_left1 = {
		    tooltip: [{
		        trigger: 'axis',
		        axisPointer: {
		            type: 'cross',
		                label: {
		                    backgroundColor: '#283b56'
		                }
		            }
		        }],
				legend: {
					data: ['CPU使用率', '系统占用', '用户占用','IoWait'],
			        itemWidth:11,
			        itemHeight:10,
					textStyle:{
						color:'#eee',
						fontSize:10,
					},
					top:'93%'
			    },
		        grid: {
		            left: '15px',
		            right: '5%',
		            top: '13%',
		            bottom: '8%',
		            containLabel: true
		        },
		            dataZoom: {
		                show: false,
		                start: 0,
		                end: 100
		            },
		            xAxis: [
		                {
		                    type: 'category',
		                    boundaryGap: true,
		                    data: [],
		                    axisLabel : {
			                    textStyle:{
									color:'#eee',
									fontSize:10,
								},
								interval : 0,
								rotate : -33,
								margin : 26,
								align : 'center',
								show : true,
								splitNumber : 15,
		                    },
		                    axisLine:{
		                        lineStyle:{
		                            color:'#eee',
		                        }
		                    } 
		                }
		            ],
		            yAxis: [
		                {
		                    type: 'value',
		                    min:0,
		                    max:100,
		                    name:'占用率(%)',
		                    min:0,
		                    scale: true,
		                    boundaryGap: [0.2, 0.2],
		                    axisLabel : {
			                    textStyle:{
									color:'#eee',
									fontSize:10,
								},
		                    },
		                    axisLine:{
		                        lineStyle:{
		                            color:'#eee',
		                        }
		                    } 
		                }
		            ],
		            series: [{
		                    name:'CPU使用率',
		                    type:'line',
	                        itemStyle : {  
	                            normal : {  
	                                lineStyle:{  
	                                    color:'red'  
	                                }  
	                            }  
	                        },  
		                    data:[]
		                },
		                {
		                	name:'系统占用',
		                	type:'bar',
	                        itemStyle : {  
	                            normal : {  
	                                color:'#008B8B',  
	                                barStyle:{  
	                                    color:'#008B8B'  
	                                }  
	                            }  
	                        }, 
		                	data:[],
		                	stack:'总量',
		                	label:{
		                		normal:{
		                			show:false,
		                			position:'insideRight'
		                		}
		                	}
		                },
		                {
		                	name:'用户占用',
		                	type:'bar',
		                	data:[],
	                        itemStyle : {  
	                            normal : {  
	                                color:'#00BFFF',  
	                                barStyle:{  
	                                    color:'#00BFFF'  
	                                }  
	                            }  
	                        }, 
		                	stack:'总量',
		                	label:{
		                		normal:{
		                			show:false,
		                			position:'insideRight'
		                		}
		                	}
		                },
		                {
		                	name:'IoWait',
		                	type:'bar',
		                	data:[],
	                        itemStyle : {  
	                            normal : {  
	                                color:'#00CFCF',  
	                                barStyle:{  
	                                    color:'#00CFCF'  
	                                }  
	                            }  
	                        }, 
		                	stack:'总量',
		                	label:{
		                		normal:{
		                			show:false,
		                			position:'insideRight'
		                		}
		                	}
		                }
		            ]
		        };
}
//得到CPU信息数据
function getCpuInfo() {
	var data_used = option_left1.series[0].data;
	var data_system = option_left1.series[1].data;
	var data_user = option_left1.series[2].data;
	var data_ioWait = option_left1.series[3].data;
	$.post('cpuInfo/getNewCpuinfo',{ip:ip},function(data){
		var data = data.data;
			var used = data.used;
			if(used>parseInt(cpuUsed)){
				prompt(ip+ '&nbsp;服务器的CPU使用率已达到&nbsp;' +used+'%');
				warnMusic();
			}
			var user = data.user;
			var system = data.system;
			var ioWait = data.iowaite;
			var time = data.time;
			var hour = new Date(time*1000).getHours();
			if(hour < 10){
				hour='0'+hour;
			}
			var minute = new Date(time*1000).getMinutes();
			if(minute < 10){
				minute='0'+minute;
			}
			var second = new Date(time*1000).getSeconds();
			if(second < 10){
				second='0'+second;
			}
			if(data_used.length<20){
				data_used.push(used);
			    data_system.push(system);
			    data_user.push(user);
			    data_ioWait.push(ioWait);
			    option_left1.xAxis[0].data.push([hour,minute,second].join(':'));
			}else{
				data_used.shift();
				data_used.push(used);
			    data_system.shift();
			    data_system.push(system);
			    data_user.shift();
			    data_user.push(user);
			    data_ioWait.shift();
			    data_ioWait.push(ioWait);
			    option_left1.xAxis[0].data.shift();
			    option_left1.xAxis[0].data.push([hour,minute,second].join(':'));
			}
			left1Chart.setOption(option_left1)
	});
	left1Chart.setOption(option_left1); 
}

function getCpuInfoList() {
	var data_used = option_left1.series[0].data;
	var data_system = option_left1.series[1].data;
	var data_user = option_left1.series[2].data;
	var data_ioWait = option_left1.series[3].data;
	$.post('cpuInfo/getCpuinfoList',{ip:ip},function(data){
		var data = data.data;
		for (var i = 0; i < data.length; i++) {
			var used = data[i].used;
			if(used>parseInt(cpuUsed)){
				prompt(ip+ '&nbsp;服务器的CPU使用率已达到&nbsp;' +used+'%');
				warnMusic();
			}
			var user = data[i].user;
			var system = data[i].system;
			var ioWait = data[i].iowaite;
			var time = data[i].time;
			data_used.push(used);
			data_user.push(user);
			data_system.push(system);
			data_ioWait.push(ioWait);
			var hour = new Date(time*1000).getHours();
			if(hour < 10){
				hour='0'+hour;
			}
			var minute = new Date(time*1000).getMinutes();
			if(minute < 10){
				minute='0'+minute;
			}
			var second = new Date(time*1000).getSeconds();
			if(second < 10){
				second='0'+second;
			}
			option_left1.xAxis[0].data.push([hour,minute,second].join(':'));
		}
		left1Chart.setOption(option_left1); 
	});
};

function getMemEcharts() {
	left2Chart = echarts.init(memUse);
	option_left2 = {
		color: ['red','gold'],//['#277ACE','#65f5f3'], //可选色：'#86D560', '#AF89D6', '#59ADF3', '#FF999A',
		// '#FFCC67'
		tooltip : {
			trigger : 'axis',
			axisPointer : { // 坐标轴指示器，坐标轴触发有效
				type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			},
			position:function(p){   //其中p为当前鼠标的位置
	            return [p[0] + 10, p[1] - 10];
			}
		},
		grid : {
			left: '5px',
            right: '5%',
            top: '13%',
            bottom: '8%',
			containLabel : true
		},
	    legend: {
	        data: ['内存使用率','SWAP使用率'],
	        itemWidth:11,
	        itemHeight:10,
			textStyle:{
				color:'#eee',
				fontSize:10,
			},
			top:'93%'
	    },
		xAxis : [ {
			type : 'category',
			data : [],
			splitLine : {
				"show" : false
			},
			axisTick : {
				"show" : false
			},
			splitArea : {
				"show" : false
			},
			axisLine:{
                lineStyle:{
                    color:'#eee',
                }
            } ,
			axisLabel : {
				interval : 0,
				rotate : -33,
				margin : 26,
				align : 'center',
				show : true,
				splitNumber : 15,
				textStyle : {
					fontFamily : "微软雅黑",
					fontSize : 10,
					color : '#EEE',
				}
			},
		} ],
		yAxis : [ {
			name : '占用率(%)',
			type : 'value',
			min : 0,
			max:100,
			splitLine : {
				lineStyle : {
					color : '#284190'
				}
			//show:false
			},
			axisLine:{
                lineStyle:{
                    color:'#eee',
                }
            }, 
			axisLabel : {
				textStyle : {
					fontSize : 10,
					color : '#EEE',
				}
			},
		} ],
		series : [ {
			name : '内存使用率',
			type : 'line',
			data : [],
		},
		{
			name : 'SWAP使用率',
			type : 'line',
			data : [],
		} ]
	};
}
//得到内存数据
function getMemInfoList() {
	$.post('MemInfo//getMemInfoList', {ip:ip}, function(data) {
		var data = data.data;
		var mem = option_left2.series[0].data;
		var swap = option_left2.series[1].data;
		for (var i = 0; i < data.length; i++) {
			var _mem = data[i].memUsed;
			var _swap = data[i].swapUsed;
			var time = data[i].time;
			var memTotal = data[i].memTotal;
			var swapTotal = data[i].swapTotal;
			mem.push(_mem);
			swap.push(_swap);
			var hour = new Date(time*1000).getHours();
			if(hour < 10){
				hour='0'+hour;
			}
			var minute = new Date(time*1000).getMinutes();
			if(minute < 10){
				minute='0'+minute;
			}
			var second = new Date(time*1000).getSeconds();
			if(second < 10){
				second='0'+second;
			}
			option_left2.xAxis[0].data.push([hour,minute,second].join(':'));
		};
		var _mem = data[data.length-1].memUsed;
		var _swap = data[data.length-1].swapUsed;
		if(_mem > parseInt(memUsed)){
			prompt(ip+ '&nbsp;服务器的内存使用率已达到&nbsp;' +_mem+'%');
			warnMusic();
		};
		if(_swap > parseInt(swapUsed)){
			prompt(ip+ '&nbsp;服务器的swap使用率已达到&nbsp;' +_swap+'%');
			warnMusic();
		};
		option_left2.tooltip.formatter = function(){
			return '内存总容量：' + memTotal + "，内存使用率：" + _mem + "%<br>" + "swap总容量：" + swapTotal + "，swap使用率：" + _swap ;
		};
		left2Chart.setOption(option_left2);
	});
	left2Chart.setOption(option_left2);
}


function getmemInfo() {
	$.post('MemInfo//getMeminfo', {ip:ip}, function(data) {
		var data = data.data;
		var mem = option_left2.series[0].data;
		var swap = option_left2.series[1].data;
		var _mem = data.memUsed;
		var _swap = data.swapUsed;
		if(_mem > parseInt(memUsed)){
			prompt(ip+ '&nbsp;服务器的内存使用率已达到&nbsp;' +_mem+'%');
			warnMusic();
		};
		if(_swap > parseInt(swapUsed)){
			prompt(ip+'&nbsp;服务器的swap使用率已达到&nbsp;' +_swap+'%');
			warnMusic();
		};
		var time = data.time;
		var hour = new Date(time*1000).getHours();
		if(hour < 10){
			hour='0'+hour;
		}
		var minute = new Date(time*1000).getMinutes();
		if(minute < 10){
			minute='0'+minute;
		}
		var second = new Date(time*1000).getSeconds();
		if(second < 10){
			second='0'+second;
		}
		if(mem.length<20){
		    mem.push(_mem);
			swap.push(_swap);
			option_left2.xAxis[0].data.push([hour,minute,second].join(':'));
		}else{
			mem.shift();
			mem.push(_mem);
			swap.shift();
			swap.push(_swap);
		    option_left2.xAxis[0].data.shift();
		    option_left2.xAxis[0].data.push([hour,minute,second].join(':'));
		};
	});
	left2Chart.setOption(option_left2);
}

//得到磁盘echarts图表
function getDiskEcharts(){
	left3Chart = echarts.init(diskUse);
	option_left3 = {
		color:['brown','#7B68EE'],
	    tooltip: {
	        trigger: 'item',
	        formatter: "{a} <br/>{b}: {c}G ({d}%)"
	    },
	    series: [
	        {
	            name:'访问来源',
	            type:'pie',
	            center:['50%','45%'],
	            selectedMode: 'single',
	            radius: [0, '45%'],
	            label: {
	                normal: {
	                    position: 'inner'
	                }
	            },
	            data:[
	                {value:335, name:'/home磁盘'},
	                {value:679, name:'/磁盘'},
	            ]
	        },
	        {
	            name:'访问来源',
	            type:'pie',
	            center:['50%','45%'],
	            radius: ['55%', '72%'],
	            tooltip: {
	                trigger: 'item',
	                formatter: ""
	            },
	            data:[
		                {value:234, name:'/home使用量',itemStyle:{
		                	normal:{
		                		color:'#66B3FF'
		                	}}},
		                {value:135, name:'/home空闲量',itemStyle:{
		                	normal:{
		                		color:'#D26900'
		                	}}},
		                {value:335, name:'/使用量',itemStyle:{
		                	normal:{
		                		color:'#BB5E00'
		                	}}},
		                {value:310, name:'/空闲量',itemStyle:{
		                	normal:{
		                		color:'#73BF00'
		                	}}},
		            ]
	        }
	    ]
	};
}
//得到磁盘数据
function getDIskInfo() {
	$.post('diskInfo//getNewDiskinfo', {ip:ip}, function(data) {
		var data = data.data;
		var diskUsedPer;
		var diskUsedPer2;
		for(var key in data){
			if(key == '/home'){
				var diskTotal = data[key].diskTotal;
				diskUsedPer = data[key].diskUsedPer/100;
				if(data[key].diskUsedPer > parseInt(diskUsed)){
					prompt(ip+'&nbsp;服务器的磁盘/home'+'内存使用率已达到&nbsp;' +diskUsedPer+'%');
					warnMusic();
				};
				var mUsed = (diskTotal*diskUsedPer).toFixed(2);
				var mNotused = diskTotal - mUsed;
				option_left3.series[0].data[1].value=diskTotal;
    			option_left3.series[0].data[1].name='/home磁盘\n'+diskTotal+'G';
    			option_left3.series[1].data[2].value=mUsed;
    			option_left3.series[1].data[2].name='/home使用率\n'+data[key].diskUsedPer+'%';
    			option_left3.series[1].data[3].value=mNotused;
    			option_left3.series[1].data[3].name='/home未使用率\n'+(100-data[key].diskUsedPer)+'%';
			}else if(key == '/'){
				var diskTotal = data[key].diskTotal;
				diskUsedPer2 = data[key].diskUsedPer/100;
				if(data[key].diskUsedPer > parseInt(diskUsed)){
					prompt(ip+ '&nbsp;服务器的磁盘/'+'内存使用率已达到&nbsp;' +diskUsedPer2+'%');
					warnMusic();
				};
				var mUsed = diskTotal*diskUsedPer2;
				var mNotused = diskTotal - mUsed;
				option_left3.series[0].data[0].value=diskTotal;
    			option_left3.series[0].data[0].name='/磁盘\n'+diskTotal+'G';
    			option_left3.series[1].data[0].value=mUsed;
    			option_left3.series[1].data[0].name='/使用率\n'+data[key].diskUsedPer+'%';
    			option_left3.series[1].data[1].value=mNotused;
    			option_left3.series[1].data[1].name='/未使用率\n'+(100-data[key].diskUsedPer)+'%';
			}
		}
		option_left3.series[1].tooltip.formatter = function(item){
			if(item.name == '/使用量'){
				return item.name + ':' + (diskUsedPer2*100) + '%';
			}else if(item.name == '/空闲量'){
				return item.name + ':' + (1-diskUsedPer2)*100 + '%';
			}else if(item.name == '/home使用量'){
				return item.name + ':' + diskUsedPer*100 + '%';
			}else if(item.name == '/home空闲量'){
				return item.name + ':' + (1-diskUsedPer)*100 + '%';
			}
		};
		left3Chart.setOption(option_left3);
	});
}

//得到网络的echarts图表
function getNetEcharts() {
	right1Chart = echarts.init(NetUse);
	option_right1 = {
		color: ['red','gold'],//['#277ACE','#65f5f3'], //可选色：'#86D560', '#AF89D6', '#59ADF3', '#FF999A',
		// '#FFCC67'
		tooltip : {
			trigger : 'axis',
			axisPointer : { // 坐标轴指示器，坐标轴触发有效
				type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			},
			position:function(p){   //其中p为当前鼠标的位置
	            return [p[0] + 10, p[1] - 10];
			}
		},
		grid : {
			left: '15px',
            right: '5%',
            top: '23%',
            bottom: '8%',
			containLabel : true
		},
	    legend: {
	        data: ['io接收速率','io发送速率'],
	        itemWidth:11,
	        itemHeight:10,
			textStyle:{
				color:'#eee',
				fontSize:10,
			},
			top:'93%'
	    },
		xAxis : [ {
			type : 'category',
			data : [],
			splitLine : {
				"show" : false
			},
			axisTick : {
				"show" : false
			},
			splitArea : {
				"show" : false
			},
			axisLine:{
                lineStyle:{
                    color:'#eee',
                }
            } ,
			axisLabel : {
				interval : 0,
				rotate : -33,
				margin : 26,
				align : 'center',
				show : true,
				splitNumber : 15,
				textStyle : {
					fontFamily : "微软雅黑",
					fontSize : 10,
					color : '#EEE',
				}
			},
		} ],
		yAxis : [ {
			name : 'io速率(kbps)',
			type : 'value',
			min : 0,
			splitLine : {
				lineStyle : {
					color : '#284190'
				}
			//show:false
			},
			axisLine:{
                lineStyle:{
                    color:'#eee',
                }
            }, 
			axisLabel : {
				textStyle : {
					fontSize : 10,
					color : '#EEE',
				}
			},
		} ],
		series : [ {
			name : 'io接收速率',
			type : 'line',
			data : [],
		},
		{
			name : 'io发送速率',
			type : 'line',
			data : [],
		} ]
	};
}
//得到网络的数据
function getNetInfoList() {
	$.post('NetInfo//getNetInfoList', {ip:ip}, function(data) {
		var data = data.data;
		//添加文字信息
		tip = document.createElement('div');//absolute
		style='width:450px;height:auto;position: relative;top:-240px;left:0px;z-index:9999;';
		tip.setAttribute('style', style);
		var str = '打开连接数：' + data[data.length-1].established + '，等待远程中断：' + data[data.length-1].timeWait +'，等待本地中断：' +data[data.length-1].closeWait;
		tip.innerText = str;
		right_1.appendChild(tip);
		//添加图形信息
		var receive = option_right1.series[0].data;
		var transmit = option_right1.series[1].data;
		for (var i = 0; i < data.length; i++) {
			for(var key in data[i].netIo){
				for(var key2 in data[i].netIo[key]){
					_receive = data[i].netIo[key]['receive'];
					_transmit = data[i].netIo[key]['transmit'];
					receive.push(_receive);
					transmit.push(_transmit);
					break;
				};
			};
			var time = data[i].time;
			var hour = new Date(time*1000).getHours();
			if(hour < 10){
				hour='0'+hour;
			}
			var minute = new Date(time*1000).getMinutes();
			if(minute < 10){
				minute='0'+minute;
			}
			var second = new Date(time*1000).getSeconds();
			if(second < 10){
				second='0'+second;
			}
			option_right1.xAxis[0].data.push([hour,minute,second].join(':'));
		};
		right1Chart.setOption(option_right1);
	});
	right1Chart.setOption(option_right1);
}

function getNewNetInfo() {
	$.post('NetInfo//getNewNetInfo', {ip:ip}, function(data) {
		var data = data.data;
		//添加文字信息
		var str = '打开连接数：' + data.established + '，等待远程中断：' + data.timeWait +'，等待本地中断：' +data.closeWait;
		tip.innerText = str;
		right_1.appendChild(tip);
		
		var receive = option_right1.series[0].data;
		var transmit = option_right1.series[1].data;
		var time = data.time;
		var hour = new Date(time*1000).getHours();
		if(hour < 10){
			hour='0'+hour;
		}
		var minute = new Date(time*1000).getMinutes();
		if(minute < 10){
			minute='0'+minute;
		}
		var second = new Date(time*1000).getSeconds();
		if(second < 10){
			second='0'+second;
		}
		for(var key in data.netIo){
			for(var key2 in data.netIo[key]){
				_receive = data.netIo[key]['receive'];
				_transmit = data.netIo[key]['transmit'];
				if(receive.length<20){
					receive.push(_receive);
					transmit.push(_transmit);
					option_right1.xAxis[0].data.push([hour,minute,second].join(':'));
					break;
				}else{
					receive.shift();
					receive.push(_receive);
					transmit.shift();
					transmit.push(_transmit);
					option_right1.xAxis[0].data.shift();
					option_right1.xAxis[0].data.push([hour,minute,second].join(':'));
					break;
				};
			};
		};
		right1Chart.setOption(option_right1);
	});
	right1Chart.setOption(option_right1);
}

//得到mySql的echarts图表
function getmySqlEcharts(){
	//right2Chart = echarts.init(mySqlUse);
	//折线图
	var connStatus = document.createElement('div');
	style='width:500px;height:300px;position: absolute;top:380px;left:0px;z-index:9999;';
	connStatus.setAttribute('style', style);
	connStatus.setAttribute('id', 'mySql2');
	right_2.appendChild(connStatus);
	Chart2 = echarts.init(document.getElementById("mySql2"));
	option_connStatus = {
		    tooltip: {
		        trigger: 'axis'
		    },
		    grid: {
		        containLabel: true
		    },
		    legend: {
		        data: ['并发连接数','活跃连接数'],
		        itemWidth:11,
		        itemHeight:10,
				textStyle:{
					color:'#eee',
					fontSize:10,
				},
				top:'82%'
		    },
		    xAxis: {
		 			type : 'category',
		 			data : [],
		 			splitLine : {
		 				"show" : false
		 			},
		 			axisTick : {
		 				"show" : false
		 			},
		 			splitArea : {
		 				"show" : false
		 			},
		 			axisLine:{
		                 lineStyle:{
		                     color:'#eee',
		                 }
		             } ,
		 			axisLabel : {
		 				interval : 0,
		 				rotate : -33,
		 				margin : 26,
		 				align : 'center',
		 				show : true,
		 				splitNumber : 15,
		 				textStyle : {
		 					fontFamily : "微软雅黑",
		 					fontSize : 10,
		 					color : '#EEE',
		 				}
		 			},
		 		},
		    yAxis: {
		        type: 'value',
		        name: '连接数(个)',
		        axisLine:{
	                lineStyle:{
	                    color:'#eee',
	                }
	            }, 
				axisLabel : {
					textStyle : {
						fontSize : 10,
						color : '#EEE',
					}
				},
		    },
		    series: [
		        {
		            name:'并发连接数',
		            type:'line',
		            data:[],
	                  itemStyle : {  
                          normal : {    
                                  color:'#1e90ff', 
                              lineStyle:{  
                                  color:'#1e90ff'  
                              }  
                          }  
                      }, 
		        },
		        {
  		            name:'活跃连接数',
  		            type:'line',
  		            data:[]
  		        },
		    ]
		};
	Chart2.setOption(option_connStatus);
	
	//环形图
	var cpuAndMem = document.createElement('div');
	style='width:500px;height:280px;position: absolute;top:680px;left:0px;z-index:9999;';
	cpuAndMem.setAttribute('style', style);
	cpuAndMem.setAttribute('id', 'mySql3');
	right_2.appendChild(cpuAndMem);
	Chart3 = echarts.init(document.getElementById("mySql3"));
	option_cpuAndMem = {
		    tooltip: {
		        trigger: 'item',
		        formatter: "{a} : {d}%"
		    },
		    grid: {
		        bottom: 30
		    },
		    xAxis: [{
		        type: 'category',
		        axisLine: {
		            show: false
		        },
		        axisTick: {
		            show: false
		        },
		        axisLabel: {
		            interval: 0
		        }
		    }],
		    yAxis: [{
		        show: false
		    }],
		    series: [{
		        name: 'CPU占用率',
		        center: ['30%','45%'],
		        radius: ['35%','65%'],
		        type: 'pie',
		        labelLine: {
		            normal: {
		                show: false
		            }
		        },
		        data: [{
		            value: 0,
		            name: '',
		            itemStyle: {
		                normal: {
		                    color: getcolor(this.value)
		                }
		            },
		            label: {
		                normal: {
		                    formatter: '{d} %',
		                    position: 'center',
		                    show: true,
		                    textStyle: {
		                        fontSize: '26',
		                        fontWeight: 'bold'
		                    }
		                }
		            }
		        }, {
		            value: 0,
		            name: '',
		            label: {
		                normal: {
		                    formatter: '\nCPU占用率',
		                    position: 'center',
		                    textStyle: {
		                        color: 'white',
		                        fontSize: 13
		                    }
		                }
		            },
		            tooltip: {
		                show: false
		            },
		            itemStyle: {
		                normal: {
		                    color: '#aaa'
		                },
		                emphasis: {
		                    color: '#aaa'
		                }
		            },
		            hoverAnimation: false
		        }]
		    }, {
		        name: '内存占用率',
		        center: ['70%','45%'],
		        radius: ['35%','65%'],
		        type: 'pie',
		        labelLine: {
		            normal: {
		                show: false
		            }
		        },
		        data: [{
		            value: 0,
		            name: '',
		            itemStyle: {
		                normal: {
		                    color: getcolor(this.value)
		                }
		            },
		            label: {
		                normal: {
		                    formatter: '{d} %',
		                    position: 'center',
		                    show: true,
		                    textStyle: {
		                        fontSize: '26',
		                        fontWeight: 'bold'
		                    }
		                }
		            }
		        }, {
		            value: 0,
		            name: '',
		            label: {
		                normal: {
		                    formatter: '\n内存占用率',
		                    position: 'center',
		                    textStyle: {
		                        color: 'white',
		                        fontSize: 13
		                    }
		                }
		            },
		            tooltip: {
		                show: false
		            },
		            itemStyle: {
		                normal: {
		                    color: '#aaa'
		                },
		                emphasis: {
		                    color: '#aaa'
		                }
		            },
		            hoverAnimation: false
		        }]
		    }]
		};
	Chart3.setOption(option_cpuAndMem);
}

//得到mySql的数据
function getmySqlInfoList(){
	$.post('mysqlInfo/getMysqlinfoList',{ip:ip},function(data){
		var data = data.data;
		var connections = option_connStatus.series[0].data;
		var connectionsActive = option_connStatus.series[1].data;
		//折线图数据
		for (var i = 0; i < data.length; i++) {
			if(data[data.length-1].status==service){
				var conn = 0;
				var connActive = 0;
				var date = new Date();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
				connections.push(conn);
				connectionsActive.push(connActive);
				option_connStatus.xAxis.data.push([hour,minute,second].join(':'));
			}else {
				var conn = data[i].connections;
				var connActive = data[i].connectionsActive;
				var time = data[i].time;
				var hour = new Date(time*1000).getHours();
				if(hour < 10){
					hour='0'+hour;
				}
				var minute = new Date(time*1000).getMinutes();
				if(minute < 10){
					minute='0'+minute;
				}
				var second = new Date(time*1000).getSeconds();
				if(second < 10){
					second='0'+second;
				}
				connections.push(conn);
				connectionsActive.push(connActive);
				option_connStatus.xAxis.data.push([hour,minute,second].join(':'));		
			}
		}
		//页面端口状态数据
		var status = data[data.length-1].status;
		if(status.toLocaleLowerCase() == service){
			prompt(ip+ '&nbsp;服务器的mySql的服务未开启');
			warnMusic();
			var cpuUsedPer = 0;
			var memUsedPer = 0;
			option_cpuAndMem.series[0].data[0].value = cpuUsedPer;
			option_cpuAndMem.series[0].data[1].value = 100-cpuUsedPer;
			option_cpuAndMem.series[1].data[0].value = memUsedPer;
			option_cpuAndMem.series[1].data[1].value = 100-memUsedPer;
			var portSum = 0;
			var processCurrent = 0;
			var maxConnections = 0;
			statusAndMax = document.createElement('div');
			style='width:450px;height:auto;position: relative;top:-565px;left:0px;z-index:9999;';
			statusAndMax.setAttribute('style', style);
			var colors = '';
			if(status == 'off'){
				colors = 'red';
			}else{
				colors = 'white';
			};
			var str = '<div>服务状态：' + '<font color=' + colors +'>' +status + '</font>' + '，最大连接数：' + maxConnections +'，进程数：' + processCurrent + '</div>';
			statusAndMax.innerHTML = str;
			right_2.appendChild(statusAndMax);
		}else {
			//饼状图数据
			var cpuUsedPer = data[data.length-1].cpuUsedPer;
			var memUsedPer = data[data.length-1].memUsedPer;
			if(cpuUsedPer>parseInt(mysqlCpuUsed)){
				prompt(ip+ '&nbsp;服务器的mySql的'+'CPU使用率已达到&nbsp;' +cpuUsedPer+'%');
				warnMusic();
			};
			if(memUsedPer>parseInt(mysqlMemUsed)){
				prompt(ip+ '&nbsp;服务器的mySql的'+'内存使用率已达到&nbsp;' +memUsedPer+'%');
				warnMusic();
			};
			option_cpuAndMem.series[0].data[0].value = cpuUsedPer;
			option_cpuAndMem.series[0].data[1].value = 100-cpuUsedPer;
			option_cpuAndMem.series[1].data[0].value = memUsedPer;
			option_cpuAndMem.series[1].data[1].value = 100-memUsedPer;
			var portSum = data[data.length-1].portSum;
			var processCurrent = data[data.length-1].processCurrent;
			var maxConnections = data[data.length-1].maxConnections;
			if(conn == maxConnections){
				prompt(ip+'&nbsp;服务器的mySql的连接数数已达到最大值');
				warnMusic();
			};
			
			statusAndMax = document.createElement('div');
			style='width:450px;height:auto;position: relative;top:-565px;left:0px;z-index:9999;';
			statusAndMax.setAttribute('style', style);
			var colors = '';
			if(status == 'off'){
				colors = 'red';
			}else{
				colors = 'white';
			};
			var str = '<div>服务状态：' + '<font color=' + colors +'>' +status + '</font>' + '，最大连接数：' + maxConnections +'，进程数：' + processCurrent + '</div>';
			statusAndMax.innerHTML = str;
			right_2.appendChild(statusAndMax);
			
			//端口状态
			var str2 = '';
			statusPort = document.createElement('div');
			style='width:450px;height:auto;position: relative;top:-280px;left:0px;z-index:9999;';
			statusPort.setAttribute('style', style);
			var portColor = [];
			var i = 0;
			for(var key in data[data.length-1].portStatus){
				if(data[data.length-1].portStatus[key] == portStatus){
					prompt(ip+ '&nbsp;服务器的端口&nbsp;' + key + '&nbsp;未开启');
					warnMusic();
					portColor.push('red');
				}else{
					portColor.push('white');
				};
				console.log(portColor);
				str2 += '<span>端口' + key + ':' + '<font color=' + portColor[i] + '>' + data[data.length-1].portStatus[key] + '</font>' + '，</span>';
				i += 1;
			};
			var newstr=str2.substring(0,str2.length-1);
			statusPort.innerHTML = newstr;
			right_2.appendChild(statusPort);
			portColor.length = 0;
		}
		
		//echarts图表加载
		Chart2.setOption(option_connStatus);
		Chart3.setOption(option_cpuAndMem);
	});
}

function getNewmySqlInfo(){
	$.post('mysqlInfo/getNewMysqlinfo',{ip:ip},function(data){
		var data = data.data;
		var status = data.status;
		if(status == service){
			prompt(ip+ '&nbsp;服务器的mySql的服务未开启');
			warnMusic();
			var cpuUsedPer = 0;
			var memUsedPer = 0;
			option_cpuAndMem.series[0].data[0].value = cpuUsedPer;
			option_cpuAndMem.series[0].data[1].value = 100-cpuUsedPer;
			option_cpuAndMem.series[1].data[0].value = memUsedPer;
			option_cpuAndMem.series[1].data[1].value = 100-memUsedPer;
			var portSum = 0;
			var processCurrent = 0;
			var maxConnections = 0;
			statusAndMax = document.createElement('div');
			style='width:450px;height:auto;position: relative;top:-565px;left:0px;z-index:9999;';
			statusAndMax.setAttribute('style', style);
			var colors = '';
			if(status == 'off'){
				colors = 'red';
			}else{
				colors = 'white';
			};
			var str = '<div>服务状态：' + '<font color=' + colors +'>' +status + '</font>' + '，最大连接数：' + maxConnections +'，进程数：' + processCurrent + '</div>';
			statusAndMax.innerHTML = str;
			right_2.appendChild(statusAndMax);
		}else {
			var connections = option_connStatus.series[0].data;
			var connectionsActive = option_connStatus.series[1].data;
			//折线图数据
			var conn = data.connections;
			var connActive = data.connectionsActive;
			var time = data.time;
			var hour = new Date(time*1000).getHours();
			if(hour < 10){
				hour='0'+hour;
			}
			var minute = new Date(time*1000).getMinutes();
			if(minute < 10){
				minute='0'+minute;
			}
			var second = new Date(time*1000).getSeconds();
			if(second < 10){
				second='0'+second;
			}
			if(connections.length < 20){
				connections.push(conn);
				connectionsActive.push(connActive);
				option_connStatus.xAxis.data.push([hour,minute,second].join(':'));
			}else{
				connections.shift();
				connections.push(conn);
				connectionsActive.shift();
				connectionsActive.push(connActive);
				option_connStatus.xAxis.data.shift();
				option_connStatus.xAxis.data.push([hour,minute,second].join(':'));
			}
			//饼状图数据
			var cpuUsedPer = data.cpuUsedPer;
			var memUsedPer = data.memUsedPer;
			console.log(memUsedPer);
			if(cpuUsedPer>parseInt(mysqlCpuUsed)){
				prompt(ip+ '&nbsp;服务器的mySql的'+'CPU使用率已达到&nbsp;' +cpuUsedPer+'%');
				warnMusic();
			};
			if(memUsedPer>parseInt(mysqlMemUsed)){
				prompt(ip+ '&nbsp;服务器的mySql的'+'内存使用率已达到&nbsp;' +memUsedPer+'%');
				warnMusic();
			};
			option_cpuAndMem.series[0].data[0].value = cpuUsedPer;
			option_cpuAndMem.series[0].data[1].value = 100-cpuUsedPer;
			option_cpuAndMem.series[1].data[0].value = memUsedPer;
			option_cpuAndMem.series[1].data[1].value = 100-memUsedPer;
			//页面端口状态数据
			var processCurrent = data.processCurrent;
			var maxConnections = data.maxConnections;
			if(conn == maxConnections){
				prompt(ip+ '&nbsp;服务器的mySql的连接数异常');
				warnMusic();
			};
			
			var colors = '';
			if(status == 'off'){
				colors = 'red';
			}else{
				colors = 'white';
			};
			var str = '<div>服务状态：' + '<font color=' + colors +'>' +status + '</font>' + '，最大连接数：' + maxConnections +'，进程数：' + processCurrent + '</div>';
			statusAndMax.innerHTML = str;
			right_2.appendChild(statusAndMax);
			
			//端口状态
			var str2 = '';
			var portColor = [];
			var i = 0;
			for(var key in data.portStatus){
				if(data.portStatus[key].toLocaleLowerCase() == portStatus){
					prompt(ip+ '&nbsp;服务器的端口&nbsp;' + key + '&nbsp;未开启');
					warnMusic();
					portColor.push('red');
				}else{
					portColor.push('white');
				};
				str2 += '<span>端口' + key + ':' + '<font color=' + portColor[i] + '>' + data.portStatus[key] + '</font>' + '，</span>';
				i += 1;
			};
			var newstr=str2.substring(0,str2.length-1);
			statusPort.innerHTML = newstr;
			right_2.appendChild(statusPort);
			portColor.length = 0;
		}
		
		//echarts图表加载
		Chart2.setOption(option_connStatus);
		Chart3.setOption(option_cpuAndMem);
	});
}


//系统资源占用（各系统对应的TOMCAT）
function getcolor(value){
	if(value>75){
		return '#ff4500';
	}else {
		return '#46d185';
	}
}

//得到echarts画布
function getCanvas(name, position) {
	var canvas = document.createElement('div');
	canvas.innerHTML = '<div></div>';
	canvas.setAttribute('id', name);
	canvas.setAttribute('style', 'height:95%;margin-top: -4%');
	position.appendChild(canvas);
}
//页面响铃报警
function warnMusic() {
	var music = document.getElementById('warnMusic');
	music.play();
	var times = 0;
	var interval = setInterval(function() {
		times += 1;
		if (times == 8) {
			clearInterval(interval);
			music.pause();
		}
	}, 1000)
}
//页面提示框报警
function prompt(status) {
	toastr.options = {
		closeButton : true,
		progressBar : true,
		showMethod : 'slideDown',
		timeOut : 30000
	};
	toastr.warning(status);
}